<template>
	<view class="app">
		<text class="back-btn iconfont icon-close" @click="uni.navigateBack({
			delta:1
		})"></text>
		<view class="welcome">请绑定手机号！</view>
	
		<!-- 手机验证码 -->
		<view class="input-content">
			<view class="input-item">
				<view>
					<input  placeholder="请输入手机号" placeholder-style="color: #909399" />
				</view>
			</view>
			<view class="input-item">
				<view class="row">
					<input placeholder="请输入验证码" placeholder-style="color: #909399" />
					<!-- 验证码组件 -->
						<mxg-code @click="phonelist" :mobile="mobile" templateCode="MSM_1999123123"></mxg-code>
			
				</view>
			</view>
			<button :loading="loadilng" type="primary" >绑定</button>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		methods:{
		
		}
		
	}
</script>

<style lang="scss">
	.app {
		padding-top: 200rpx;
	}
	.q{
		width: 95%;
		padding-left: 80rpx;
		margin-top: 10rpx;
	 
	 }
	
	.zc {
		color: green;
		padding-left: 60rpx;
		font-size: 30rpx;
	}
	
	/* 关闭按钮 */
	.back-btn {
		position: absolute;
		left: 20rpx;
		top: 50rpx;
		z-index: 90;
		padding: 20rpx;
		font-size: 39rpx;
		color: #606266;
	}
	
	.left-top-sign {
		font-size: 120rpx;
		color: #f8f8f8;
	}
	
	.welcome {
		position: relative;
		top: -90rpx;
		padding-left: 60rpx;
		font-size: 46rpx;
		color: #555;
		text-shadow: 1px 0px 1px rgba(0, 0, 0, .3);
	}
	
	.input-content {
		padding: 0 60rpx;
	}
	
	.input-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		padding-left: 30rpx;
		background: #f8f6fc;
		height: 120rpx;
		border-radius: 4px;
		margin-bottom: 50rpx;
	
		&:last-child {
			margin-bottom: 0;
		}
	
		.row {
			width: 100%;
		}
	
		.tit {
			height: 50rpx;
			line-height: 56rpx;
			font-size: 26rpx;
			color: #606266;
		}
	
		input {
			flex: 1;
			height: 60rpx;
			font-size: 30rpx;
			color: #303133;
			width: 100%;
		}
	}
</style>